<template>
  <div class="global-header">
    <div class="header-logo">
      <img src="../../assets/logo.png" alt="" />
      <span>扎啤终端实时销售管理系统</span>
    </div>
    <div class="header-content">
      <el-button-group>
        <el-button @click="toProfile"
          ><i class="iconfont icon-user"></i
          >{{ this.$store.state.username }}</el-button
        >
        <el-button @click="toNoteBox">
          <el-badge :value="this.$store.state.message.length" class="item">
            <i class="iconfont icon-notice"></i>通知
          </el-badge>
        </el-button>
        <el-button><i class="iconfont icon-mailbox1"></i>消息</el-button>
        <el-button @click="logout"
          ><i class="iconfont icon-log-out"></i>退出</el-button
        >
      </el-button-group>
    </div>
  </div>
</template>
<script>
export default {
  name: 'GlobalHeader',
  data () {
    return {
    }
  },
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    toProfile () {
      this.$router.push('/home/profile')
    },
    toNoteBox () {
      this.$router.push('/home/notebox')
    }
  }
}
</script>
<style lang="less" scoped>
.global-header {
  background-color: #009973;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  color: #fff;

  .header-logo {
    display: flex;
    align-items: center;
    font-size: 20px;

    span {
      margin-left: 15px;
    }

    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }
  }

  .header-content {
    .el-button {
      border: none;
      color: #fff;
      background-color: #009973;
      padding-top: 21px;
      padding-bottom: 21px;
      i {
        margin-right: 6px;
      }
    }
    .el-button:hover {
      background-color: #0d7e62;
    }
  }
}
.item {
  padding-right: 0px;
}
</style>
